<template>
  <div class="callback-container">
    <div class="loading-spinner">
      <i class="fas fa-spinner fa-spin"></i>
      <p>正在处理登录信息...</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useGuard } from '@authing/guard-vue3'
import { ElMessage } from 'element-plus'
import type { JwtTokenStatus, User } from '@authing/guard-vue3'

const router = useRouter()
const route = useRoute()
const guard = useGuard()

const handleAuthingLoginCallback = async () => {
  try {
    // 1. 触发 guard.handleRedirectCallback() 方法完成登录认证
    // 用户认证成功之后，我们会将用户的身份凭证存到浏览器的本地缓存中
    await guard.handleRedirectCallback()

    // 2. 处理完 handleRedirectCallback 之后，你需要先检查用户登录态是否正常
    const loginStatus: JwtTokenStatus | undefined = await guard.checkLoginStatus()

    if (!loginStatus) {
      return console.error('Guard is not get login status')
    }

    // 3. 获取到登录用户的用户信息
    const userInfo: User | null = await guard.trackSession()

    console.log(userInfo)

    // 你也可以重定向到你的任意业务页面，比如重定向到用户的个人中心
    // 如果你希望实现登录后跳转到同一页面的效果，可以通过在调用 startWithRedirect 时传入的自定义 state 实现
    // 之后你在这些页面可以通过 trackSession 方法获取用户登录态和用户信息

    // 示例一：跳转到固定页面
    router.replace({
      name: 'Personal'
    })

    // 示例二：获取自定义 state，进行特定操作
    // const search = window.location.search
    // 从 URL search 中解析 state
  } catch (e) {
    // 登录失败，推荐再次跳转到登录页面
    console.error('Guard handleAuthingLoginCallback error: ', e)
  }
}

onMounted(() => {
  handleAuthingLoginCallback()
  // Guard SDK 会自动处理 URL 中的 code，并完成令牌交换
  // guard.handleRedirectCallback().then(userInfo => {
  //   // 令牌交换成功后，userInfo 中将包含 accessToken
  //   console.log('回调成功，获取到的用户信息:', userInfo)
    
  //   // // 在这里处理登录成功逻辑
  //   // const accessToken = userInfo.token;
  //   // if (accessToken) {
  //   //   localStorage.setItem('accessToken', accessToken)
  //   //   localStorage.setItem('userInfo', JSON.stringify(userInfo))
  //   //   // 跳转到你的应用主页
  //   //   router.replace('/')
  //   // } else {
  //   //   console.error('未能获取到 Access Token')
  //   //   router.replace('/login')
  //   // }
  // }).catch(error => {
  //   console.error('处理回调失败:', error)
  //   // 登录失败，可以跳转回登录页
  //   router.replace('/login')
  // })
})
</script>

<style scoped>
.callback-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 50%, #f8fafc 100%);
}

.loading-spinner {
  text-align: center;
  color: #4f46e5;
}

.loading-spinner i {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

.loading-spinner p {
  font-size: 1.2rem;
  margin: 0;
}
</style>
